<template>
   <span class="radio-box">
      <span v-if="showListen" @click="listen()" class="radio-span V7_iconfont" :class="[row && audioObj.currentId === row._id && isPlay ? 'V7_iconV7tubiao_zanting percentag-span': 'V7_iconV7tubiao_bofang-103', audioObj.currentId === row._id ? 'percentag-span': '']"></span>
      <el-progress type="circle" v-if="audioObj.currentId === row._id" :width="26" :percentage="percentage" class="progress-circle" :format="format" :stroke-width="2">
      </el-progress>
      <a :href="lastUrl" target="_blank" v-if="showDowload"  download><i class="radio-span download-icon V7_iconfont V7_iconV7tubiao_xiazai"></i></a>
    </span>
</template>
<script lang='ts'>
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'AudioProgress'
})
export default class AudioProgress extends Vue {
  [x: string]: any
  @Prop({ default: () => false }) private showDowload!: boolean // 是否展示下载按钮
  @Prop({ default: () => false }) private showListen!: boolean // 是否展示下载按钮
  @Prop({ default: () => '' }) private url!: string // 录音的Url
  @Prop({ default: () => '' }) private type!: string // 录音的Url的domain类型，根据类型取到七牛对应的区域地址 eg: http://v7-fs-common.7moor.com(七牛上传的domain地址，用于domain + key 加载完整地址)
  @Prop({ default: () => '' }) private row!: any // {isplay: '当前播放的状态', _id: '当前录音的标识', audioDuration: '通话总时长'}
  @Prop({ default: () => false }) private propIsplay!: boolean // 列表类型的，要传当前是否播放的状态（列表类型的必传）
  private preTimer: number = 1 // 播放进度计时
  private percentage: number = 0 // 播放进度 %  (preTimer / audioDuration)
  private isPlay: boolean = this.row.isPlay || false // 播放还是暂停的icon控制

  @Watch('url')
  private AudioUrlChange (newUrl: any) { // 监测到url变化时，重置（场景： 满意度中change下拉的录音列表）
    this.isPlay = false
    this.restStatus()
    CommonModule.setAudioObj({ audioUrl: this.lastUrl }) // 设置当前播放的url, 之前的会被重置
  }

  @Watch('propIsplay')
  private PropIsplayChange (current: any) { // 列表中的播放还是暂停的控制
    this.isPlay = current || false
  }

  get audioObj () { // 获取当前audio的信息， audioUrl, currentId
    return this.$store.state.common.audioObj
  }

  get lastUrl () {
    const initConfig = this.$store.state.common.initConfig
    const doMain = initConfig && initConfig.qiniuDomainMap ? initConfig.qiniuDomainMap[this.type] : ''
    return doMain ? `${doMain}/${this.url}` : this.url
  }

  private listen (row: any) { // 点击播放或者是暂停
    if (!this.row.audioDuration) { // 没有录音时长，不执行
      this.$message({ message: '无效录音', type: 'error' })
      return false
    }
    CommonModule.setAudioObj({ audioUrl: this.lastUrl }) // 设置当前播放的url, 之前的会被重置
    this.isPlay = !this.isPlay
    this.$emit('audioClick', this.row._id, this.isPlay) // 用于列表类型的重置其他兄弟的状态
    if (this.audioObj.currentId !== this.row._id && this.isPlay) { // 操作的不是同一条，清除定时器
      window.clearInterval((window as any).audioTimer)
      this.preTimer = 1
      this.percentage = 0
      setTimeout(() => { // setTimeout，为录音加载提供缓冲的时间
        this.progressFun(row) // 开始计算播放进度
      }, 0)
    } else { // 和上次操作的是同一条或第一次操作，记住上一次
      if (this.isPlay) {
        setTimeout(() => { // setTimeout，为录音加载提供缓冲的时间
          this.progressFun(row) // 开始计算播放进度
        }, 0)
      } else {
        window.clearInterval((window as any).audioTimer)
      }
    }
    CommonModule.setAudioObj({ currentId: this.row._id })
    setTimeout(() => { // setTimeout，为录音加载提供缓冲的时间
      this.playOrPause()
    }, 0)
  }

  private restStatus () { // 重置所有状态（清除定时器， 清除进度，icon重置成待播放，录音暂停）
    window.clearInterval((window as any).audioTimer)
    this.percentage = 0
    this.preTimer = 1
    CommonModule.setAudioObj({ currentId: '' })
    this.isPlay = false
    const audioNode = document.getElementById('m7audio_hide') as HTMLVideoElement
    if (audioNode && audioNode.currentSrc) {
      audioNode.pause()
    }
  }

  private progressFun (row: any) { // 开始计算播放进度
    (window as any).audioTimer = window.setInterval(() => {
      this.preTimer++
      console.log(this.preTimer, '计时this.preTimer=======')
      let number = Math.ceil(((this.preTimer / this.row.audioDuration) * 100))
      const temp = this.row.audioDuration > 2400 ? 100 : 98
      if (this.percentage < temp && this.percentage > -1) {
        if (number === 0) { // 录音时长比较长时，让他默认有进度
          number = 1
        } else if (number > 100) {
          number = 100
        }
        this.percentage = number
      } else { // 进度超过99了，就重置所有状态
        this.restStatus()
        CommonModule.setAudioObj({ audioUrl: '' })
      }
    }, 1000)
  }

  private format () { // 进度条需要的回调方法
    return ''
  }

  private playOrPause () { // 开始或者是暂停录音，可以父级直接调用
    const audioNode = document.getElementById('m7audio_hide') as HTMLVideoElement
    if (audioNode && audioNode.currentSrc) {
      if (this.isPlay) {
        audioNode.play()
      } else {
        audioNode.pause()
      }
    }
  }

  private mounted () {
    this.$bus.$on('restAudioStatus', () => { // 事件总线，重置audio
      this.restStatus()
      CommonModule.setAudioObj({ audioUrl: '' })
    })
  }

  private beforeDestroy () { // 组件销毁时，清除定时器和事件总线
    this.$bus.$off('restAudioStatus')
    window.clearInterval((window as any).audioTimer)
  }

  private activated () { // 组件激活时 (播放中切换其他模块，再次回来的时候)
    this.restStatus()
    CommonModule.setAudioObj({ audioUrl: '' })
  }

  private deactivated () { // 组件暂停使用时，重置状态
    this.restStatus()
    CommonModule.setAudioObj({ audioUrl: '' })
  }
}
</script>
<style lang="stylus" scoped>
  .radio-box
    position relative
    height 28px
    line-height 26px
    display inline-block
  .radio-span
    cursor pointer
    color $c-main
    width 24px
    height 24px
    line-height 24px
    display inline-block
    background #fff
    margin 2px 0px 2px 0
    box-shadow 0px 1px 3px 0px rgba(216, 222, 230, 0.9)
    border-radius 50%
    font-size 12px
    text-align center
    vertical-align middle
  .download-icon
    margin-right 0
    margin-left 10px
  .percentag-span
     width 22px
     height 22px
     position absolute
     top 1px
     left 2px
     z-index 1000
  .progress-circle
    vertical-align middle
</style>
